<template>
  <div class="info">
    <!-- 头部导航 -->
    <hmnavbar path="/my" title="我的资料"></hmnavbar>
    <div class="content">
      <!-- 个人信息 -->
      <van-cell-group class="myavatar">
        <van-cell @click="toEdit('avatar')" title="头像" is-link>
          <template #default>
            <img class="myimg" :src="baseURL + userInfo.avatar" alt="" />
          </template>
        </van-cell>
      </van-cell-group>
      <van-cell-group class="bottom">
        <van-cell
          @click="toEdit('nickname')"
          title="昵称"
          :value="userInfo.nickname"
          is-link
        />
        <van-cell
          @click="opengender"
          title="性别"
          :value="genderObj[userInfo.gender]"
          is-link
        />
        <van-cell
          @click="openarea"
          title="地区"
          :value="areaData.city_list[userInfo.area]"
          is-link
        />
        <van-cell
          @click="toEdit('intro')"
          title="个人简介"
          :value="userInfo.intro"
          is-link
        />
      </van-cell-group>
      <!-- 退出按钮 -->
      <van-button
        @click="logout"
        class="mybtn"
        type="danger"
        plain
        size="large"
      >
        退出登录
      </van-button>
    </div>
    <!-- 性别面板 -->
    <van-popup
      :close-on-click-overlay="false"
      v-model="genderShow"
      position="bottom"
    >
      <van-picker
        show-toolbar
        :default-index="userInfo.gender"
        :columns="genderData"
        @confirm="updateGender"
        @cancel="genderShow = false"
      />
    </van-popup>
    <!-- 地区面板 -->
    <van-popup v-model="areaShow" position="bottom">
      <van-area
        :area-list="areaData"
        :columns-num="2"
        :value="userInfo.area"
        @confirm="updateArea"
      />
    </van-popup>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { removelocal } from '@/utils/local.js'
// 导入修改用户的方法
import { editApi } from '@/api/au.js'
// 导入区域的数据
import areaData from '../../../utils/area.js'
export default {
  data () {
    return {
      baseURL: process.env.VUE_APP_URL,
      // 地区数据源
      areaData: areaData,
      // 控制性别面板的显示与隐藏
      genderShow: false,
      // 性别选项的数据源
      genderData: ['未知', '男孩子', '女孩子'],
      // 控制地区面板的显示与隐藏
      areaShow: false
    }
  },
  computed: {
    ...mapState(['userInfo', 'genderObj'])
  },
  methods: {
    // 跳转到修改页面
    toEdit (prop) {
      this.$router.push(`/editInfo?prop=${prop}`)
    },
    // 修改地区
    async updateArea (data) {
      // 得到 area 组件中的数据
      // console.log(data[1].code)
      // 关闭面板
      this.areaShow = false
      // 添加加载效果
      this.$toast.loading('加载中...')
      // 提交数据到服务器
      await editApi({
        area: data[1].code
      })
      // 更新数据源
      this.$store.dispatch('setUserInfo')
      // 添加成功效果
      this.$toast.success('修改成功')
    },
    // 打开地区面板
    openarea () {
      this.areaShow = true
    },
    // 修改性别
    async updateGender (value, index) {
      // value: 选中的值  index：值对应的下标
      // console.log(value, index)
      // 关闭性别面板
      this.genderShow = false
      // 添加加载效果
      this.$toast.loading('加载中...')
      // 得到当前选中性别的下标 index
      // 提交数据到服务器
      await editApi({
        gender: index
      })
      // // 更新用户信息：本质上是对 vuex 在进行操作
      // const res = await getUserInfoApi()
      // // 将返回的数据重新保存到 vuex 中
      // this.$store.commit('setUserInfo', res.data)
      this.$store.dispatch('setUserInfo')
      // 添加成功效果
      this.$toast.success('修改成功')
    },
    // 打开性别面板
    opengender () {
      this.genderShow = true
    },
    // 退出登录
    logout () {
      // 退出登录
      // 提示用户是否退出
      this.$dialog
        .confirm({
          title: '提示',
          message: '是否退出登录'
        })
        .then(() => {
          // 删除 token
          removelocal('heimamm_web_token')
          // 将 isLogin 改为 false
          this.$store.commit('setIsLogin', false)
          // 清除 userInfo
          this.$store.commit('setUserInfo', '')
          // 重新跳转回 login 页面
          this.$router.push('/login')
        })
        .catch(() => {})
    }
  }
}
</script>

<style lang="less" scoped>
.info {
  height: 100vh;
  background-color: #f7f4f5;
  .content {
    padding: 18px 15px;
    .myavatar {
      margin-bottom: 10px;
      border-radius: 10px;
      /deep/ .van-cell.van-cell--clickable {
        align-items: center;
        border-radius: 10px;
      }
      .myimg {
        width: 40px;
        height: 40px;
        border-radius: 50%;
      }
    }
    .bottom {
      border-radius: 10px;
      overflow: hidden;
    }
    .mybtn {
      margin-top: 10px;
      border: none;
      border-radius: 8px;
    }
  }
}
</style>
